<template>
  <div class="main-menu">
    <div class="menu-left">
      <router-link to="/" class="menu-item">
        <span>发现音乐</span>
      </router-link>
      <router-link to="/music-library" class="menu-item">
        <span>我的音乐</span>
      </router-link>
      <router-link to="/friends" class="menu-item">
        <span>听小友</span>
      </router-link>
    </div>
    <div class="menu-right">
      <div class="search-box">
        <input type="text" placeholder="搜索音乐、视频、歌手、歌单" class="search-input" />
        <i class="iconfont icon-search"></i>
      </div>
      <div class="user-section">
        <div class="user-avatar">
          <img :src="displayAvatar" alt="avatar" />
        </div>
        <span class="username">{{ currentUser?.username }}</span>
        <button @click="handleLogout" class="logout-btn">
          <i class="iconfont icon-logout"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  name: 'MainMenu',
  setup() {
    const store = useStore()
    const router = useRouter()
    const currentUser = computed(() => store.getters['auth/currentUser'])

    const handleLogout = () => {
      store.dispatch('auth/logout')
      router.push('/login')
    }

    // 计算属性用于显示头像
    const displayAvatar = computed(() => {
      if (currentUser.value && currentUser.value.avatar) {
        return currentUser.value.avatar
      } else if (currentUser.value && currentUser.value.username) {
        const firstLetter = currentUser.value.username.charAt(0).toUpperCase()
        // 简单的哈希函数生成颜色，确保不同字母有不同颜色
        const hashCode = (str) => {
          let hash = 0
          for (let i = 0; i < str.length; i++) {
            hash = str.charCodeAt(i) + ((hash << 5) - hash)
          }
          let color = '#'
          for (let i = 0; i < 3; i++) {
            const value = (hash >> (i * 8)) & 0xff
            color += ('00' + value.toString(16)).substr(-2)
          }
          return color
        }
        const bgColor = hashCode(firstLetter)
        const textColor = 'white'

        // 生成 SVG Data URL
        const svg = `
          <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" width="32" height="32" fill="${bgColor}"/>
            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="${textColor}" font-family="Arial" font-size="18">${firstLetter}</text>
          </svg>
        `
        return `data:image/svg+xml;base64,${btoa(svg)}`
      }
      return '/default-avatar.png' // 如果没有用户或用户名，使用默认头像
    })

    return {
      currentUser,
      handleLogout,
      displayAvatar,
    }
  },
}
</script>

<style scoped>
.main-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background-color: var(--surface-light); /* 导航栏背景为白色 */
  box-shadow: var(--shadow-sm); /* 添加柔和阴影 */
  padding: 0 8rem; /* 增加左右内边距，使内容更向中间靠拢 */
}

.menu-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  /* margin-right: auto; */
  flex-shrink: 0; /* 防止菜单项收缩 */
}

.menu-item {
  color: var(--text-color-primary) !important; /* 强制将文字颜色更改为深色 */
  text-decoration: none;
  padding: var(--spacing-sm); /* 统一内边距，提供更多水平空间 */
  border-radius: var(--border-radius-md); /* 稍微增加圆角 */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 14px;
  position: relative;
}

.menu-item span {
  /* Target the text span directly */
  white-space: nowrap; /* Prevent text from wrapping */
}

.menu-item:hover {
  background-color: var(--background-color-light); /* 柔和的悬停背景色 */
}

.menu-item.router-link-active {
  color: var(--text-white) !important; /* 活跃项文字颜色为白色 */
  background-color: var(--primary-color) !important; /* 活跃项背景为主题蓝色 */
}

.menu-item.router-link-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: var(--text-white);
  border-radius: 2px;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.search-box {
  position: relative;
  width: 150px; /* 设置更小的固定宽度 */
  flex-shrink: 0; /* 防止搜索框收缩 */
  flex-grow: 0; /* 防止搜索框增长 */
  /* 移除所有诊断性边框 */
  /* border: 2px solid orange; */
  /* flex: 1; */
  /* max-width: 180px; */
}

.search-input {
  width: 100%;
  height: 32px;
  background-color: var(--background-color-light) !important;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 0 var(--spacing-lg) 0 var(--spacing-md);
  color: var(--text-color-primary) !important;
  font-size: 14px;
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

.search-input::placeholder {
  color: var(--text-color-secondary) !important; /* 强制占位符颜色 */
}

.search-input:focus {
  outline: none;
  background-color: var(--background-color-light) !important; /* 强制聚焦时背景保持浅灰色 */
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.icon-search {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color-secondary) !important; /* 强制搜索图标颜色 */
}

.user-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0; /* 确保用户部分不收缩 */
  /* 移除诊断性边框 */
  /* border: 2px solid purple; */
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.username {
  color: var(--text-color-primary) !important; /* 强制用户名颜色 */
  font-size: 14px;
  white-space: nowrap;
}

.logout-btn {
  background: none;
  border: none;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: color 0.3s ease;
}

.logout-btn:hover {
  color: var(--primary-color);
}

/* Icon font styles for Font Awesome replacement */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-display: block;
  src:
    url('@/assets/webfonts/fa-solid-900.woff2') format('woff2'),
    url('@/assets/webfonts/fa-solid-900.woff') format('woff');
}

.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .main-menu {
    height: auto;
    flex-direction: column;
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .menu-left,
  .menu-right {
    width: 100%;
    justify-content: center;
  }

  .menu-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 13px;
  }

  .search-box {
    max-width: 100%;
  }

  .search-input {
    height: 30px;
    font-size: 13px;
  }

  .user-section {
    gap: var(--spacing-sm);
  }

  .username {
    font-size: 13px;
  }

  .logout-btn {
    font-size: 13px;
  }
}

/* 图标字体 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.ttf') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: '\e600';
}
.icon-music:before {
  content: '\e601';
}
.icon-playlist:before {
  content: '\e602';
}
.icon-search:before {
  content: '\e603';
}
.icon-logout:before {
  content: '\e604';
}
</style>
